<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <el-col>操作</el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-tree :data="list" :props="defaultProps" :default-expand-all="true">
          <!-- 作用域插槽 data拿到的是每一个子节点的对象 -->
          <!-- 
      什么时候用到作用域插槽？父组件中如果想使用子组件中的数据进行自定义内容的渲染 (table 单元格数据渲染)
    -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          @click.native="showAdd(data)"
                          v-isshow="'tjzzjg'"
                          >添加子部门</el-dropdown-item
                        >
                        <el-dropdown-item
                          @click.native="showBianji(data)"
                          v-isshow="'bjzzjg'"
                          >编辑部门</el-dropdown-item
                        >
                        <el-dropdown-item
                          @click.native="showRemove(data)"
                          v-isshow="'sczzjg'"
                          >删除部门</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="form" :rules="rules" ref="addbtn">
            <el-form-item
              label="部门名称"
              :label-width="formLabelWidth"
              prop="name"
            >
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="部门编码"
              :label-width="formLabelWidth"
              prop="code"
            >
              <el-input v-model="form.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="部门负责人"
              :label-width="formLabelWidth"
              prop="manager"
            >
              <el-select v-model="form.manager" placeholder="请选择部门负责人">
                <el-option
                  :label="item.username"
                  :value="item.username"
                  v-for="(item, index) in peoplelist"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="部门介绍"
              :label-width="formLabelWidth"
              prop="introduce"
            >
              <el-input v-model="form.introduce" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click.native.prevent="handleAdd"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>



<script>
import { getDepartments, addDepartments, getEmployeeSimple, delDepartments, getDepartDetail, updateDepartments } from '@/api/departments'
import tree from '@/components/tree/index.vue'
import { tranListToTreeData } from '@/utils/translist'
export default {
  // 组件名称
  name: 'departments',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { tree },
  // 组件状态值
  data () {
    // 部门编码code验证
    var validatePass = (rule, value, callback) => {
      if (!this.form.id) {
        let is = this.oldlists.find(ele => {
          return ele.code === value
        })
        if (is) {
          callback(new Error('code不能重复'));
        } else {
          callback();
        }
      } else {
        callback()
      }
    }
    return {
      oldlists: [],
      title: '新增部门',
      peoplelist: [],
      currentindex: {},
      list: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      dialogFormVisible: false,
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: '',
        pid: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' },
        ],
        introduce: [
          { required: true, message: '请输入部门描述', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取员工列表
    getEmployeeSimples () {
      getEmployeeSimple().then(res => {
        this.peoplelist = res.data
      })
    },
    // 获取部门列表
    getDepartmentss () {
      getDepartments().then(res => {
        console.log(res);
        this.oldlists = res.data.depts
        let lists = JSON.parse(JSON.stringify(res.data.depts))
        this.list = tranListToTreeData(lists, "")

      })
    },
    // 增加/更新部门验证功能
    handleAdd () {
      this.$refs.addbtn.validate(valid => {
        if (valid) {
          if (this.form.id) { // 更新部门验证
            updateDepartments(this.form).then(res => {
              this.$message({
                duration: 1000,
                type: 'success',
                message: '修改成功!'
              });
              this.getDepartmentss()
              this.dialogFormVisible = false
              this.$refs.addbtn.resetFields()
            })
          } else { // 添加部门验证
            addDepartments(this.form).then(res => {
              this.getDepartmentss()
              this.dialogFormVisible = false
              this.$refs.addbtn.resetFields()
            })
          }
        } else {
          return false
        }
      })
    },
    // 显示添加部门弹出框
    showAdd (a) {
      for (const key in this.form) {
        this.form[key] = ''
      }
      this.currentindex = a
      this.form.pid = this.currentindex.id

      this.dialogFormVisible = true
    },
    // 显示删除部门弹出框
    showRemove (a) {
      this.$confirm('确定删除部门吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除部门网络请求
        delDepartments(a.id || a._id).then(res => {
          if (res.message === '删除部门成功') {
            this.$message({
              duration: 1000,
              type: 'success',
              message: '已成功删除部门!'
            });
            // 更新视图
            this.getDepartmentss()
          }
        })
      }).catch(() => { });
    },
    // 显示编辑部门弹出框
    showBianji (data) {
      this.dialogFormVisible = true
      this.title = '编辑部门'
      getDepartDetail(data.id).then(res => {
        this.form = res.data
      })
    }
  },
  created () {
    // 获取部门列表
    this.getDepartmentss()
    // 获取员工列表
    this.getEmployeeSimples()
  }
}
</script>
<style scoped>
</style>